<template>
	<view class="body">
		<view class="header">
			<infomationVue :query="query"></infomationVue>
			<view class="tabs">
				<view class="Item" v-for="(item,index) in tabslist" :key="index" @click.stop="changeIndex(index)">
					<text class="size" :style="{color:activeIndex == index ?'#73F0EA':'#666666'}">{{item}}</text>
					<view class="bar" :style="{background:activeIndex == index ?'#73F0EA':''}">
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower">
			<view class="comlum_box" v-if="list.length">
				<view v-for="(item,index) in list" :key="index" class="Item">
					<view class="top">
						<view class="time">
							{{item.time_str}}
						</view>
						<view class="shop_name">
							{{item.shop_name}}
						</view>
					</view>
					<view class="photo_box">
						<view class="Img_box">
							<image :src="item.entering_face" mode="aspectFill" class="img" @click="$PREVIEW_IMAGE(item.entering_face)"></image>
							<view class="size">
								录入人脸
							</view>
						</view>
						<view class="Img_box">
							<image :src="item.capture_face" mode="aspectFill" class="img"  @click="$PREVIEW_IMAGE(item.capture_face)"></image>
							<view class="size">
								抓拍人脸
							</view>
						</view>
						<view class="flex">
						</view>
						<view class="btn" @click="openShow(item)">
							查看对比
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>
			<empty v-else :content="'到店情况'"></empty>
		</scroll-view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<image :src="bigQuery.entering_face" mode="aspectFill" class="img"></image>
				<image :src="bigQuery.capture_face" mode="aspectFill" class="img"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		storememberCrossList
	} from '@/api/manager.js'
	import empty from '@/components/empty.vue'
	import infomationVue from '../../coach/components/infomation.vue'
	export default {
		components: {
			infomationVue,
			empty
		},
		data() {
			return {
				status: 'loadmore',
				infomation:{
					user_id:'',
					page:1,
					form:'clear'
				},
				show:false,
				query: {},
				activeIndex: 0,
				tabslist: [
					'规整列表',
					'细化列表'
				],
				list: [
				],
				bigQuery:{}
			}
		},
		onLoad(e) {
			this.infomation.user_id = e.user_id
			this.getstorememberCrossList()
		},
		methods: {
			scrolltolower(){
				this.query.page++
				this.getstorememberCrossList()
			},
			getstorememberCrossList(){
				storememberCrossList(this.infomation).then(({data:res})=>{
					console.log('res', res);
					if (res.code == 1) {
						this.query = res.data.user_info
						const list = []
						this.status = 'loading'
						if (this.query.page > res.data.all_page) {
							console.log('nomore');
							this.status = 'nomore'
							return false
						} else {
							console.log('more');
							this.status = 'more'
							this.list = this.list.concat(res.data.list)
						}
					
						console.log('list', this.list);
					}
				})
			},
			changeIndex(index) {
				if(this.activeIndex != index){
					this.activeIndex = index
					if(!index){
						this.query.form = 'clear'
					}else{
						this.query.form = 'thining'
					}
					this.list = []
					this.query.page = 1
					this.getstorememberCrossList()
				}
				
			},
			openShow(item){
				this.show = true
				this.bigQuery = item 
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.body {
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			display: flex;
			flex-direction: column;
			align-items: center;

			.tabs {
				width: 750rpx;
				height: 88rpx;
				background: #ffffff;
				box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(199, 205, 179, 0.15);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
				padding-top: 25rpx;

				.Item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.size {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: center;
						color: #666666;
						margin-bottom: 12rpx;
					}

					.bar {
						width: 44rpx;
						height: 8rpx;
						border: 2rpx solid rgba(0, 0, 0, 0.00);
						border-radius: 2rpx;
					}
				}
			}
		}

		.scroll-y {
			width: 100%;
			height: 82vh;

			.comlum_box {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 24rpx;

				.Item {
					width: 702rpx;
					height: 336rpx;
					background: #ffffff;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					padding: 24rpx;
					
					.top{
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 100%;
						border-bottom: 1rpx solid #e9e9e9;
						padding-bottom: 22rpx;
					}
					.time {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
					}
					
					.shop_name{
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #666666;
					}
					.photo_box {
						padding-top: 26rpx;
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;

						.Img_box {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-right: 32rpx;

							.img {
								width: 150rpx;
								height: 150rpx;
								background: rgba(0, 0, 0, 0.00);
								border-radius: 8rpx;
								margin-bottom: 16rpx;
							}

							.size {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #000000;
							}
						}

						.flex {
							flex: 1;
						}

						.btn {
							transform: rotateZ(360deg);
							width: 152rpx;
							height: 64rpx;
							background: #73F0EA;
							border: 1rpx solid #73F0EA;
							border-radius: 16rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: center;
							color: #ffffff;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
	.warp{
		width: 100%;
		height: 100vh;
		padding: 62rpx 0;
		.img{
			width: 750rpx;
			height: 750rpx;
		}
	}
</style>